<template>
  <div class="health-info-container">
    <!-- 一级分类 -->
    <div class="category-toggle">
      <div
          v-for="type in categoryTypes"
          :key="type.id"
          class="category"
          @click="showCategoryData(type.id)"
      >
        {{ type.name }}
      </div>
    </div>

    <!-- 二级分类数据 -->
    <div class="category-data">
      <div class="category-grid">
        <div
            v-for="category in currentCategories"
            :key="category.id"
            class="category-item secondary-category-item"
            @click="showCategoryDataflow(category.id)"
            :class="{ 'active': activeCategoryId === category.id }"
        >
          {{ category.name }}
        </div>
      </div>
    </div>

    <!-- 三级分类数据 -->
    <div class="category-data">
      <div class="category-grid">
        <div
            v-for="category in currentCategoriesData"
            :key="category.id"
            class="category-item tertiary-category-item"
        >
          • {{ category.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const currentCategoriesData = ref([]);  // 三级分类数据
const currentCategories = ref([]);  // 二级分类数据
const categoryTypes = ref([]);  // 一级分类数据
const lastHoveredCategoryId = ref(null);  // 最后一次鼠标悬停的分类ID
const defaultCategoryId = ref(null);  // 默认显示的分类类型
const activeCategoryId = ref(null);  // 当前激活的二级分类ID

const ps = 'http://localhost:8000/app/';

// 页面加载时获取所有分类类型
onMounted(() => {
  axios.get(ps + `health_category/`)
      .then(res => {
        categoryTypes.value = res.data;
        // 获取第一个分类类型的数据
        if (res.data.length > 0) {
          defaultCategoryId.value = res.data[0].id;
          fetchCategoryData(defaultCategoryId.value);
        }
      })
      .catch(error => {
        console.error('Failed to fetch category types:', error);
      });
});

const fetchCategoryData = (categoryId) => {
  axios.post(ps + `health_category_one/`, { id: categoryId })
      .then(res => {
        currentCategories.value = res.data.map(cat => ({
          ...cat,
          show: true // 一级分类及其二级分类默认显示
        }));
        // 默认显示第一个二级分类的三级分类数据
        if (res.data.length > 0) {
          showCategoryDataflow(res.data[0].id);
        }
      })
      .catch(error => {
        console.error('Failed to fetch category data:', error);
      });
};

const showCategoryData = (categoryId) => {
  lastHoveredCategoryId.value = categoryId;
  fetchCategoryData(categoryId);
};

const showCategoryDataflow = (categoryId) => {
  activeCategoryId.value = categoryId;
  axios.post(ps + `health_category_two/`, { id: categoryId })
      .then(res => {
        currentCategoriesData.value = res.data;
      })
      .catch(error => {
        console.error('Failed to fetch category dataflow:', error);
      });
};
</script>

<style scoped>
.health-info-container {
  margin-top: 20px;

}

.category-toggle {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  margin-bottom: 20px;
  text-align: center; /* 居中 */
  background-color: steelblue;
}

.category {
  cursor: pointer;
  padding: 10px 15px; /* 增加横向内边距 */
  border: 1px solid #ebeef5;
  border-radius: 4px;
  transition: background-color 0.3s;
  margin: 5px; /* 使用统一的边距 */
  flex: 1 1 calc(25% - 10px); /* 每个分类项占据25%宽度，减去边距 */
  min-width: 150px; /* 设置最小宽度 */
}

.category:hover {
  background-color: #f5f7fa;
}

.category-data {
  display: block; /* 默认显示 */
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* 自动调整 */
  gap: 10px;
  margin-bottom: 20px;
}

.category-item {
  border: 1px solid #ebeef5;
  padding: 10px;
  border-radius: 4px;
}

.secondary-category-item {
  background-color: #f0f9eb; /* 二级分类背景色 */
  font-size: 16px; /* 二级分类字体大小 */
}

.tertiary-category-item {
  background-color: #e6f7ff; /* 三级分类背景色 */
  color: #0050b3; /* 三级分类文字颜色 */
  font-size: 14px; /* 三级分类字体大小 */
  padding-left: 15px; /* 三级分类前的点 */
}

.active {
  background-color: #d9ecff; /* 激活的二级分类背景色 */
  color: #000; /* 激活的二级分类文字颜色 */
}

/* 媒体查询，确保在小屏幕下仍有良好显示 */
@media (max-width: 768px) {
  .category {
    flex: 1 1 calc(50% - 10px); /* 在小屏幕上占据50%宽度 */
  }

  .category-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* 一级分类自动调整 */
  }
}
</style>
